<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			span{
				
				border: 1px solid red;
			}
			.span{
				margin: 10px 0px;
				padding: 10px 0px;
			}
			.div01{
				border: 1px solid red; 
				background: red;
				height: 100px;
				width: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.div02{
				border: 1px solid green;
				background: green;
				height: 20px;
				width: 20px;
			}
		</style>
	</head>
	<body>
		<p>此时，两个span中间会出现空格 因为涉及到换行了</p>
		<span>111111111</span>
		<span>222222222</span>
		
		<p>此时，两个span中间没有了空格</p>
		<p>第一种：</p>
		<span>111111111</span><span>222222222</span>
		<p>第二种：</p>
		<span>111111111</span
		><span>222222222</span>
		
		<br/><br/>
		<hr />
		<br/><br/>
		<p>
			行内元素设置内边距  外边距  仅左右起作用   上下不起作用
			内边距设置后只是空间会变大，但是元素本身  并没有影响
		</p>
		<span class="span">111111111</span><span>222222222</span>
		
		
		<br/><br/>
		<hr />
		<br/><br/>
		<p style="white-space: pre-line;">
			弹性盒模型居中：
			两个div 给父元素div设置
			display:flex;
			justify-content:center;
			align-items:center;
		</p>
		<div class="div01">
			<div class="div02">
				
			</div>
		</div>
		
		<br/><br/>
		<hr />
		<br/><br/>
		
		<p style="white-space: pre-line;">
			置换元素不受浮动得影响，
			也就是说内容不固定大小的标签，
			不会因为浮动覆盖，也就是说是行内块元素
			可增加行框高度，但不影响line-height
			浏览器根据元素得标签和属性来决定元素得具体显示内容
			例如：input img button select textarea
		</p>
		<div style="background: red; height: 100px; width: 100px;float: left;">
			
		</div>
		<span>324324</span>
		<input type="text"  />
		<img src="img/yzm.png"/>
		<input type="button" value="hh" />
		<select>
			<option>2121</option>
		</select>
		
		
		<br/><br/>
		<hr />
		<br/><br/>
		<P style="white-space: pre-line;">
			背景裁切：
			content-box:背景被裁切到内容
			border-box:背景被裁切到边框
			padding-box:背景被裁切到内边距框
			background-clip: content-box;
		</P>
		<div style="width: 30px; height: 30px; border: 1px solid #dddddd;border-radius: 50%; padding: 5px; background: #008000; background-clip: content-box;">
		</div>
		
		<p style="white-space: pre-line;">
			防止外边距塌陷
			1.父元素加border
			2.父元素加padding
			3.父元素与第一个或者最后一个子元素之间加行内元素
			4.父元素是BFC
			5.两个块元素都加上加-webkit-margin-collaps:separate (停止共享margin值)
		</p>
	</body>
</html>
